<template>
 <div>
     <div class="sale-header">
         <div class="sale-main">
             <div class="main-left">
                 <img src="images/today-sale-lefttext.png" alt="">
             </div>
             <div class="main-right">
               <span>2021</span>
                 <span>09</span> <span>13</span>
             </div>
         </div>
         <div class="sale-main">
           <div class="todayTopcon">
             <img src="/images/kxmh.png" alt="">
             <div class="topcon-right">
               <span class="selectSeat">选座购票</span>
               <h1>开心麻花2020年底大戏</h1>
               <p>8.7</p>
               <p>北京 海淀剧院</p>
               <p> 2021-09-10 19:30</p>
               <p>￥<span>80</span>起</p>
             </div>
           </div>
         </div>
     </div>
     <div class="today-sale-con">
         <div class="sale-main-con">
           <div class="h1">限时优惠</div>
         <div class="tdSaleListsCon"> <tdSaleListCon/></div>
         </div>
     </div>
     </div>   
</template>
<script>
import tdSaleListCon from "@/components/wyw/today-sale-main.vue";
export default {
  components:{
    tdSaleListCon
  }
};
</script>
<style scoped>
.sale-header {
  width: 100%;
  height: 5.6rem;
  background-image:url('/images/today-sale-bg.png'),linear-gradient(#ff5f33, #f03, #b3151c);
  background-blend-mode: overlay;
}
.sale-main {
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  /* background-color: cadetblue; */
}
.main-left {
  width: 2rem;
  /* background-color: aqua; */
  margin-top: 1.2rem;
}
.main-left img {
  width: 100%;
}
.main-right {
  /* width: 2.4rem; */
  /* background-color: aqua; */
  margin-top: 0.8rem;
  display: flex;
}
.main-right span:nth-child(1){
  width: 1rem;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.24rem;
  color: #ffffff;
  position: absolute;
  top: 0.42rem;
  right:-0.1rem;
}
.main-right span:nth-child(2),.main-right span:nth-child(3)
 {
  width: 1rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: block;
  color: #ffffff;
  text-align: center;
  font-size: 0.7rem;
  margin-left: 0.1rem;
  background: linear-gradient(
    319deg,
    rgba(255, 215, 178, 0.52),
    rgba(255, 225, 169, 0.15)
  );
}
.todayTopcon {
  width: 100%;
  padding: 0.2rem;
  display: flex;
  justify-content: space-between;
  height: 2.7rem;
  background: #ffffff;
  position: relative;
  border-radius: 0.12rem;
  top: 0.1rem;
}
.todayTopcon img {
  border-radius: 0.1rem;
}
.topcon-right {
  width: 67%;
  display: flex;
  flex-direction: column;
}
/* .topcon-right span{
  display: block;
  color: grey;
  margin-bottom: 0.1rem;
} */
.selectSeat {
  display: block;
  width: 1.2rem;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #ff5f10;
  font-size: 0.26rem;
  background: #fff5f1;
  text-align: center;
}
.topcon-right {
  height: 100%;
}
.topcon-right h1 {
  font-size: 0.34rem;
  font-weight: bold;
  margin-bottom: 0.1rem;
}
.topcon-right p:nth-child(1) {
  display: block;
  font-size: 0.34rem;
  font-weight: bold;
  color: #ff5f10;
  margin-bottom: 0.1rem;
}
.today-sale-con {
  width: 100%;
  background-color: #ffeeda;
  border-radius: 0.5rem;
  position: relative;
  top: -0.4rem;
  overflow: hidden;
}
.sale-main-con{
  width: 95%;
  margin: auto;
   margin-top: 0.2rem;
}
.today-sale-con .h1 {
  width: 100%;
  height: 1rem;
  margin-top: 0.2rem;
  line-height: 1rem;
  font-size: 0.44rem;
  color: #e58631;
  font-weight: bold;
}
</style>